<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>正则表达式测试工具</title>
<style>
	dl, dd {
		padding: 0;
		margin: 0;
	}
	.cf {
		zoom: 1;
	}
	.cf:after {
		display: block;
		clear: both;
		content: "";
	}
	.wrap {
		width: 1000px;
		margin: 100px auto;
	}
	.title {
		color: #777;
		font-size: 24px;
		text-align: center;
	}
	#regexp {
		float: left;
		width: 650px;
		font-size: 14px;
	}
	#regexp .textbox {
		width: 638px;
		height: 150px;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 5px;
		resize: none;
	}
	#regexp .readonly {
		background-color: #eee;
	}
	#regexp .textfield {
		width: 215px;
		padding: 5px;
		border: 1px solid #ccc;
	}
	#reglist {
		float: right;
		width: 320px;
		border: 1px solid #ccc;
		border-radius: 5px;
		background-color: #f5f5f5;
		padding: 20px 0;
	}
	#reglist dt {
		margin-bottom: 10px;
		text-indent: 20px;
		color: #999;
		font-size: 18px;
		font-weight: bold;
	}
	#reglist dd {
		height: 40px;
		line-height: 40px;
		text-indent: 20px;
	}
	#reglist a {
		display: block;
		color: #08c;
		text-decoration: none;
	}
	#reglist a:hover {
		color: #005580;
		background-color: #eee;
	}
</style>
</head>
<body>

	<div class="wrap cf">
		<h1 class="title">正则表达式测试工具</h1>
		<div id="regexp">
			<textarea id="userText" class="textbox" placeholder="在此输入待匹配的文本"></textarea>
			<p>
				正则表达式：<input type="text" id="userRegExp" class="textfield" placeholder="在此输入正则表达式" />
				<input type="checkbox" name="userModifier" value="i" />忽略大小写
				<input type="checkbox" name="userModifier" value="g" />全局匹配
				<input type="checkbox" name="userModifier" value="m" />多行匹配
				<input type="button" id="matchingBtn" value="测试匹配" />
			</p>
			匹配结果：
			<div id="matchingResult" class="textbox readonly"></div>
			<p>
				替换文本：<input type="text" id="userReplaceText" class="textfield" placeholder="在此输入替换文本" />
				<input type="button" id="replaceBtn" value="替换" />
			</p>
			替换结果：
			<div id="replaceResult" class="textbox readonly"></div>
		</div>
		<dl id="reglist">
			<dt>常用正则表达式</dt>
			<dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd>
			<dd><a href="javascript:;" title="[1-9]\d{4,}">QQ</a></dd>
			<dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd>
			<dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd>
			<dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd>
			<dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd>
			<dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd>
			<dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd>
			<dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd>
			<dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd>
			<dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd>
			<dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd>
			<dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd>
			<dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd>
			<dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd>
		</dl>
	</div>

<p style="text-align: center;">本程序由<strong style="color: blue;">Alex</strong>制作，欢迎大家使用！</p>
<script>
	var userText = document.getElementById('userText'),
		userRegExp = document.getElementById('userRegExp'),
		userModifier = document.getElementsByName('userModifier'),
		matchingBtn = document.getElementById('matchingBtn'),
		matchingResult = document.getElementById('matchingResult'),
		userReplaceText = document.getElementById('userReplaceText'),
		replaceBtn = document.getElementById('replaceBtn'),
		replaceResult = document.getElementById('replaceResult'),
		reglists = document.getElementById('reglist').getElementsByTagName('a');
	var pattern,
		modifier = '';

	for (var i = 0; i < userModifier.length; i++) {
		userModifier[i].onclick = function () {
			modifier = '';
			for (var j = 0; j < userModifier.length; j++) {
				if (userModifier[j].checked) {
					modifier += userModifier[j].value;
				}
			}
		}
	}

	matchingBtn.onclick = function () {
		if (!userText.value) {
			alert('请输入待匹配的文本！');
			userText.focus();
			return;
		}
		if (!userRegExp.value) {
			alert('请输入正则表达式！');
			userRegExp.focus();
			return;
		}
		pattern = new RegExp('(' + userRegExp.value + ')', modifier);
		matchingResult.innerHTML = pattern.exec(userText.value) ?
			userText.value.replace(pattern, '<span style="background-color: yellow;">$1</span>') : '(没有匹配)';
	};
	replaceBtn.onclick = function () {
		if (!userText.value) {
			alert('请输入待匹配的文本！');
			userText.focus();
			return;
		}
		if (!userRegExp.value) {
			alert('请输入正则表达式！');
			userRegExp.focus();
			return;
		}
		if (!userReplaceText.value) {
			alert('请输入要替换成的文本！');
			userReplaceText.focus();
			return;
		}
		pattern = new RegExp('(' + userRegExp.value + ')', modifier);
		replaceResult.innerHTML = userText.value.replace(pattern, '<span style="color: red;">' + userReplaceText.value +
			'</span>');
	};

	for (var i = 0; i < reglists.length; i++) {
		reglists[i].onclick = function () {
			userRegExp.value = this.title;
		};
	}
</script>
</body>
</html>